import { CaretDownOutlined } from '@ant-design/icons';
import { Input, Button } from 'antd';
import React, { useCallback, useRef, useState } from 'react';
import QRCode from 'qrcode.react';
import Captcha from 'react-captcha-code';
import { useIntl, connect, FormattedMessage } from 'umi';
import type { Dispatch } from 'umi';
import type { StateType } from '@/models/login';
import type { ConnectState } from '@/models/connect';
import login_userid from '../../../../public/icons/login_userid.png';
import login_pwd from '../../../../public/icons/login_pwd.png';
import login_role from '../../../../public/icons/login_role.png';
import login_verify from '../../../../public/icons/login_verify.png';
import login_code from '../../../../public/icons/code.png';
import pwd_login from '../../../../public/icons/pwd-login.png';
import styles from './index.less';

export type LoginProps = {
  dispatch: Dispatch;
  userLogin: StateType;
  submitting?: boolean;
};

const Login: React.FC<LoginProps> = (props) => {
  const intl = useIntl();
  // 控制state值
  const [qrcodeLogin, setQrcodeLogin] = useState<boolean>(false);
  const handleChange = useCallback((captcha) => {
    console.log('captcha:', captcha, props.userLogin);
  }, []);

  const captchaRef: any = useRef<HTMLCanvasElement>();

  // 刷新验证码
  // const handleClick = () => {
  //   (captchaRef as any).current.refresh();
  // };

  return (
    <div className={styles.body}>
      <div className={styles.main}>
        <div className={styles.login_title}>
          {qrcodeLogin === false && (
            <>
              <div className={styles.login_title_name}>账号登陆</div>
              <div>
                <img
                  onClick={() => {
                    setQrcodeLogin(true);
                  }}
                  className={styles.login_qrcode}
                  alt="logo"
                  src={login_code}
                />
              </div>
            </>
          )}

          {qrcodeLogin === true && (
            <>
              <div className={styles.login_title_name}>手机扫码 安全登录</div>
              <div>
                <img
                  onClick={() => {
                    // alert("手机扫码 安全登录")
                    setQrcodeLogin(false);
                  }}
                  className={styles.login_qrcode}
                  alt="logo"
                  src={pwd_login}
                />
              </div>
            </>
          )}
        </div>

        {qrcodeLogin === false && (
          <div className={styles.mainContent}>
            <div className={styles.login_input_div}>
              <Input
                className={styles.login_input}
                size="large"
                placeholder="身份证号"
                prefix={<img className={styles.input_icon} alt="logo" src={login_userid} />}
              />
            </div>
            <div className={styles.login_input_div}>
              <Input
                className={styles.login_input}
                size="large"
                placeholder="角色"
                prefix={<img className={styles.input_icon} alt="logo" src={login_role} />}
                suffix={<CaretDownOutlined style={{ color: '#115cf6' }} />}
              />
            </div>

            <div className={styles.login_input_div}>
              <Input
                className={styles.login_input}
                size="large"
                placeholder="密码"
                prefix={<img className={styles.input_icon} alt="logo" src={login_pwd} />}
              />
            </div>
            <div className={styles.captcha_dev}>
              <Input
                className={styles.captcha_small}
                size="large"
                placeholder={intl.formatMessage({
                  id: 'pages.login.captcha.placeholder',
                  defaultMessage: '请输入验证码',
                })}
                prefix={<img className={styles.input_icon} alt="logo" src={login_verify} />}
              />
              <Captcha
                className={styles.captcha_code}
                ref={captchaRef}
                bgColor="white"
                charNum={4}
                onChange={handleChange}
              />
            </div>
            <div>
              <a
                style={{
                  float: 'left',
                  color: '#fc714c',
                }}
              >
                <FormattedMessage id="pages.login.forgotPassword" defaultMessage="忘记密码" />
              </a>
              <a
                style={{
                  float: 'right',
                  fontWeight: 'bold',
                }}
              >
                <FormattedMessage id="pages.login.findNewAccount" defaultMessage="新注册账号" />
              </a>

              <div style={{ clear: 'both' }}></div>
              <div className={styles.submit}>
                <Button className={styles.submitBtn} type="primary">
                  登&nbsp;&nbsp;录
                </Button>
              </div>
            </div>
          </div>
        )}

        {qrcodeLogin === true && (
          <div className={styles.main_qrcode}>
            <QRCode
              id="qrCode"
              value="https://www.jianshu.com/u/992656e8a8a6"
              size={300} // 二维码的大小
              // fgColor="#000000" // 二维码的颜色
              includeMargin={true}
              style={{ margin: '0px auto' }}
              imageSettings={{
                // 二维码中间的logo图片
                // src: '../../publish/favicon.png',
                src: 'http://cdn.yxxit.com/research/favicon.png',
                height: 60,
                width: 60,
                excavate: true, // 中间图片所在的位置是否镂空
              }}
            />
          </div>
        )}
      </div>
    </div>
  );
};

export default connect(({ login, loading }: ConnectState) => ({
  userLogin: login,
  submitting: loading.effects['login/login'],
}))(Login);
